   <div id="main-content">
   <div id="recent-projects">
     <div class="top"></div>
       <div class="middle">
            
            <ul id="projects">
            <li class="project" id="project-1">
                  <div class="project-image">
                      <img src="<?php echo $ruta;?>/img/projects/medium/project-1.jpg" alt=""/>
                  </div>
                  <div class="project-description">
                    <h3> Bussiness Card Design </h3>
                    <?php echo $texto_cabecera_1;?>
                    <div class="space"></div>
                    Mauris placerat eleifend leo. Ouisque sit amet est et sapien ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac  turpis egestas.
                    <div class="space"></div><br />
                    <div align="right">
                    Created by <a href="#">John Doe</a><br />
                    Copyright © <a href="#">Rockablepress.com</a>
                    </div>
                  </div>
            </li>
            
            <li class="project" id="project-2">
                  <div class="project-image">
                      <img src="<?php echo $ruta;?>/img/projects/medium/project-2.jpg" alt=""/>
                  </div>
            </li>
            
            <li class="project" id="project-3">
                  <div class="project-image">
                      <img src="<?php echo $ruta;?>/img/projects/medium/project-3.jpg" alt=""/>
                  </div>
                  <div class="project-description">
                     <h3> How to be a rockable freelancer</h3>
                     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
                    <div class="space"></div>
                    Mauris placerat eleifend leo. Ouisque sit amet est et sapien ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
                    <div class="space"></div><br />
                    <div align="right">
                    Created by <a href="#">John Doe</a><br />
                    Copyright © Rockablepress.com
                    </div>
                  </div>
            </li>
            <li class="project" id="project-4">
                  <div class="project-image">
                      <img src="<?php echo $ruta;?>/img/projects/medium/project-4.jpg" alt=""/>
                  </div>
           </li>
        </ul>
        
        </div><!-- End of middle -->
        <div class="bottom">  
              <div id="arrow"></div>  
              
              <ul id="projects-thumbs">
                 <li id="thumb-project-1" title="Bussiness Card Design">
                    <a href="project.html"><img src="<?php echo $ruta;?>/img/projects/thumbs/project-1.jpg" alt="" /></a>
                 </li>
                 <li id="thumb-project-2" title="Bussiness Card Design 2">
                    <a href="project.html"><img src="<?php echo $ruta;?>/img/projects/thumbs/project-2.jpg" alt="" /></a>
                 </li>
                 <li id="thumb-project-3" title="How to be a rockable freelancer">
                    <a href="project.html"><img src="<?php echo $ruta;?>/img/projects/thumbs/project-3.jpg" alt="" /></a>
                 </li>
                 <li id="thumb-project-4" title="Bussiness Card Design 3">
                   <a href="project.html"><img src="<?php echo $ruta;?>/img/projects/thumbs/project-4.jpg" alt="" /></a>
                 </li>
             </ul>
           
          <ul id="controls">
              <li><a href="#" class="p_details"> More Details </a></li>
              <li>
                  <a href="#" class="start" title="Start Slideshow"> Slideshow </a>
                  <a href="#" class="stop" title="Stop Slideshow"> Slideshow </a>
              </li>
          </ul>
          
      </div>
   </div><!-- End of recent projects -->

   <div id="content">
   
   <div id="top-bar"></div>
   <div id="middle-home">
       <ul id="columns">
           <li>
            <div class="editable">
                <h3>About Us</h3>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
                <div class="space"></div>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                <div class="space"></div>
                <img src="<?php echo $ruta;?>/img/about-us.jpg" alt=""/>
            </div>
           </li>
           <li>
            <h3>Services</h3>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
            <div class="space"></div>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            <div class="space"></div>
            <img src="<?php echo $ruta;?>/img/services.jpg" alt=""/>
           </li>
           <li>
            <h3>Latest Post of blog</h3>
            <img src="<?php echo $ruta;?>/img/blog.jpg" alt=""/>
            <small style="font-style:inherit;">Posted by <a href="#">admin</a> in <a href="#">Financial</a> -  15 Nov 2009</small>
            <div class="space"></div>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
            <div class="space"></div>
            <span style="float:right;"><a href="#">Read More ...</a></span>
          </li>
       </ul>
   </div>
   <div id="bottom-bar-home"></div>
   </div><!-- End of content -->
   <div id="footer">Copyright © !nteractive  2009  |  Valid CSS &amp; HTML</div>
   </div><!-- End of main content -->
